//1.引入路由
import {createRouter, createWebHashHistory} from "vue-router"

//2.定义routes
//引入页面组件

// import toplist from "../pages/toplist"
import playlist from "../pages/playlist"
import list from "../pages/list"
import detail from "../pages/detail"
import page404 from "../pages/page404"
import discover from "../pages/discover"
import friends from "../pages/discover/friends"
import djradio from "../pages/discover/djradio"
//vue里面的路由配置流程

//1.创建页面组件

//2.配置routes

//3.使用router-view展示路由视口

//页面和页面之间的通信方式:

//同源的情况下:localStorage sessionStorage window(单页应用中) query

//vue路由中:动态路由参数 query params

let routes = [
    {
        path: "/toplist/:id",
        //路由懒加载(代码分割)
        //import()这个语法会将当前的代码进行分割,注释的语法就是分割之后的模块名字
        //分割之后的好处:按需加载,提高首页的访问速度
        component: () => import(/*webpackChunkName:'toplist' */"../pages/toplist")
    },
    //匹配优先级:谁先定义就匹配谁
    {
        path: '/playlist',
        component: playlist
    },
    // {
    //     path: '/playlist',
    //     component: toplist
    // },
    {
        path: "/list",
        name: 'list',
        component: list,

    },
    {
        //动态路由参数解耦合
        props: true,
        path: '/detail/:productid',
        component: detail
    },
    //vue2中
    //当需要匹配404页面的时候,路径可以写成通配符
    // {
    //     path: '*',
    //     component: page404
    // },
    //vue3
    //需要将路由变成动态路由的编写方式 /:abc(.*)*
    {
        path: '/:abc(.*)*',
        component: page404
    },
    {
        path: "/discover",
        component: discover,
        //子级路由children中的选项的path不要加'/'
        //跳转子级路由的时候,要带上父级路由的路径,保证路径和视图呈现一致
        //重定向
        redirect: "/discover/friends",
        children: [
            {
                path: "friends",
                component: friends
            },
            {
                //命名路由,好处就是页面跳转的时候可以不需要根据路径跳转了,只需要通过name就能跳转
                name: 'dj',
                path: "djradio",
                component: djradio
            }
        ]
    },
    {
        path: "/counter",
        component: () => import(/*webpackChunkName:'counter' */"../pages/counter")
    }
]

//3.创建路由实例
// vue3-router
export default createRouter({
    //定义路由模式
    //hash模式
    history: createWebHashHistory(),
    //VueRouter.createWebHistory() history模式
    routes
})

//vue2-router

// export default new VueRouter({
//     //路由模式
//     mode:'hash',
//     rotues
// })